<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Graph background areas</title>

    <style type="text/css">
        body {font: 10pt arial;}
        p {max-width: 600px;}
    </style>

    <script type="text/javascript" src="../graph.js"></script>
    <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../graph.css">
</head>

<body>
<h1>Graph background areas</h1>

<p>
    Graph supports colored background areas.
</p>
<p>
    Please note that this example is not supported by IE8 and older,
    as IE8 does not support RGB and RGBA colors (for transparent colors) in canvas/excanvas.
    If compatibility with IE8 and older is required, please use HEX colors.
    <a href="javascript: safeHexColors();">Show with HEX colors</a>.
</p>

<div id="mygraph"></div>

<script type="text/javascript">
    function functionA(x) {
        return Math.sin(x / 25) * Math.cos(x / 25) * 50 + (Math.random()-0.5) * 10;
    }

    function functionB(x) {
        return Math.sin(x / 50) *50 + Math.cos(x / 7) * 75 + (Math.random()-0.5) * 20 + 20;
    }

    var aMin = -10;
    var bMax = 70;
    var i, imax = 100, d, value, date, start;

    // Create and populate dataset with function A
    var dataA = {
        'label': 'Function A',
        'data': []
    };
    d = new Date(2010, 9, 23, 20, 0, 0);
    for (i = 0; i < imax; i++) {
        dataA.data.push({
            'date': new Date(d.valueOf()),
            'value': functionA(i)
        });
        d.setMinutes(d.getMinutes() + 1);
    }

    // Create and populate dataset with function B
    var dataB = {
        'label': 'Function B',
        'data': []
    };
    d = new Date(2010, 9, 23, 20, 0, 0);
    for (i = 0; i < imax; i++) {
        dataB.data.push({
            'date': new Date(d.valueOf()),
            'value': functionB(i)
        });
        d.setMinutes(d.getMinutes() + 1);
    }

    /**
     * Create background ranges from a given dataset, where the data values
     * are above given threshold value.
     * @param {{date: Date, value: Number}[]} data  A set of objects containing
     *                                              properties date and value
     * @param {Number} threshold                    A threshold value
     * @returns {{start: Date, end: Date}[]}        A set of ranges, containing
     *                                              properties start and end.
     */
    function createRangesAboveThreshold(data, threshold) {
        var ranges = [];
        var date, value;
        var start = null;
        for (var i = 0, imax = data.length; i < imax; i++) {
            date = data[i].date;
            value = data[i].value;
            if (!start) {
                if (value > threshold) {
                    start = new Date(date.valueOf());
                }
            }
            else {
                if (value < threshold || i == imax - 1) {
                    var end = new Date(date.valueOf());
                    ranges.push({
                        'start': start,
                        'end': end,
                        'text': 'high',
                        'title': 'Start of a high area'
                    });
                    start = null;
                }
            }
        }

        return ranges;
    }

    /**
     * Create background ranges from a given dataset, where the data values
     * are below given threshold value.
     * @param {{date: Date, value: Number}[]} data  A set of objects containing
     *                                              properties date and value
     * @param {Number} threshold                    A threshold value
     * @returns {{start: Date, end: Date}[]}        A set of ranges, containing
     *                                              properties start and end.
     */
    function createRangesBelowThreshold(data, threshold) {
        var ranges = [];
        var date, value;
        var start = null;
        for (var i = 0, imax = data.length; i < imax; i++) {
            date = data[i].date;
            value = data[i].value;
            if (!start) {
                if (value < threshold) {
                    start = new Date(date.valueOf());
                }
            }
            else {
                if (value > threshold || i == imax - 1) {
                    var end = new Date(date.valueOf());
                    ranges.push({
                        'start': start,
                        'end': end,
                        'text': 'low',
                        'title': 'Start of a low area'
                    });
                    start = null;
                }
            }
        }

        return ranges;
    }

    // Create and populate thresholdA with background areas where function A < aMin
    var thresholdA = {
        'label': 'A < ' + aMin,
        'type': 'area',
        'data': createRangesBelowThreshold(dataA.data, aMin)
    };

    // Create and populate thresholdB with background areas where function B > bMax
    var thresholdB = {
        'label': 'B > ' + bMax,
        'type': 'area',
        'data': createRangesAboveThreshold(dataB.data, bMax)
    };

    var events = {
        'label' : 'Events',
        'type': 'event',
        'data': [
            {
                'date': new Date(2010, 9, 23, 20, 30, 0),
                'text': 'A',
                'title': 'Here I pressed a button'
            },
            {
                'date': new Date(2010, 9, 23, 21, 0, 0),
                'text': 'B',
                'title': 'Here I pressed another button'
            }
        ]
    };

    // specify options
    var options = {
        width:  '100%',
        height: '350px',
        line: {
            font: '10pt arial'
        },
        lines: [
            {
                // Threshold A
                //legend: false,
                color:     'rgba(51, 102, 204, 0.1)',
                textColor: 'rgba(51, 102, 204, 1)'
            },
            {
                // Threshold B
                //legend: false,
                color:     'rgba(220, 57, 18, 0.1)',
                textColor: 'rgba(220, 57, 18, 1)'
            },
            {
                // event
                //legend: false,
                //width: 4,
                color: 'rgba(255, 165, 0, 0.7)',
                textColor: 'rgba(255, 165, 0, 0.7)'
            },
            {
                // Function A
                color: 'rgb(51, 102, 204)'
            },
            {
                // Function B
                color: 'rgb(220, 57, 18)'
            }
        ]
    };

    // Instantiate our graph object.
    var graph = new links.Graph(document.getElementById('mygraph'));

    // Draw our graph with the created data and options
    graph.draw([thresholdA, thresholdB, events, dataA, dataB], options);

    // Draw but with safe (non-transparent) hex colors
    function safeHexColors() {
        options.lines[0].color = '#e4eaf8';
        options.lines[1].color = '#f8e6e2';
        options.lines[2].color = '#3366cc';
        options.lines[3].color = '#dc3912';
        graph.draw([thresholdA, thresholdB, dataA, dataB], options);
    }
</script>

</body>
</html>
